<template>
	<view class="container">
		<h3>请输入章节小说内容：</h3>

		<view class="">
			第几章：输入数字：<uni-easyinput type="number" class="uni-mt-5" trim="all" v-model="zhangjie.num"
				placeholder="章节"></uni-easyinput>
		</view>
		<view class="">
			小说标题： <uni-easyinput class="uni-mt-5" trim="all" v-model="zhangjie.title" placeholder="标题"></uni-easyinput>
		</view>
		<textarea v-model="content" class="editor" maxlength="9999"></textarea>
		<view class="tong">
			<button class="btn" @click="save">保存</button>
			<button class="btn" @click="add">载入图片</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '', // 小说内容
				contentarr: [],
				zhangjie: {
					novelname: '',
					num: null,
					zhangjienum: '',
					title: '',
					contentarr: []
				}
			}
		},
		onLoad: function(options) {
			let novelData = uni.getStorageSync('tuwen'); // 从本地缓存中取出名为novelData的数据
			console.log(novelData);
			this.zhangjie = novelData;
			this.content = novelData.contentarr.join('\n');
		},
		methods: {
			add() {
				uni.showLoading({
					title: '提交中...',
					mask: true
				});
				var that = this;
				uni.chooseImage({
					count: 1, // 最多可选择的图片数量，默认为 9
					sizeType: ['original', 'compressed'], // 可以指定选择原图或压缩图，默认为 ['original', 'compressed']
					sourceType: ['album', 'camera'], // 可以指定选择图片的来源，默认为 ['album', 'camera']
					success: function(res) {
						// 选择图片成功
						let tempFilePaths = res.tempFilePaths; // 图片的临时文件路径数组
						console.log('选择的图片路径:', tempFilePaths);
						const name = res.tempFiles[0].name // 选择图片的名称.后缀名
						console.log(name);
						uniCloud.uploadFile({
							filePath: tempFilePaths[0],
							cloudPath: Date.now() + "-" + name, // 这样写上传的图片后缀名就是原本的后缀名（也就是我最终想实现的效果）
						}).then(res => {
							console.log(res.fileID)
							that.content = that.content + '\n' + res.fileID;
							uni.hideLoading()
							uni.showToast({
								title: '添加成功',
								icon: 'success'
							});
						})
					},
					fail: function(err) {
						// 选择图片失败
						console.error('选择图片失败:', err);
					}
				});
			},
			save() {
				uni.showLoading({
					title: '提交中...',
					mask: true
				});
				// 将小说内容保存至后端
				// 这里只是简单地将内容打印到控制台
				console.log(this.content);
				const arr = this.content.split('\n'); // 将字符串按换行符分割为数组
				this.contentarr = arr;
				console.log(arr);
				this.zhangjie.contentarr = arr;
				this.zhangjie.zhangjienum = '第' + this.zhangjie.num + '章'
				console.log(this.zhangjie);
				let obj = this.zhangjie
				uni.setStorageSync('tuwen', obj);
				uniCloud.callFunction({
					name: "xiugai_novel_neirong",
					data: obj
				}).then(res => {
					console.log(res);
					uni.showLoading({
						title: '提交中...',
						mask: true
					});
					uni.navigateTo({
						url: '/pages/novel_contant_show/novel_contant_show?command=1',
					});
				})
			},
		}
	}
</script>

<style>
	view {
		margin-top: 10px;
	}

	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.editor {
		margin: 20px 0;
		width: 95%;
		height: 300px;
		padding: 10px;
		border: 1px solid #ccc;
		resize: none;
	}

	.tong {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.tong .btn {
		margin-top: 10px;
		padding: 5px 10px;
		background-color: #007bff;
		color: #fff;
		border: none;
	}
</style>